<template>
  <!-- 活动列表详情 -->
  <div class="xiangqbox">
    <div style="background-color: #ffffff; padding: 15px">
      <div class="headerbox">
        <div>
          <span>当前考核状态:</span>
          <span
            v-if="this.$route.query.nodeName === '考核结束'"
            style="color: #5cb85c"
          >{{ this.$route.query.nodeName }}</span>
          <span
            v-else
            style="color: #428bca"
          >{{ this.$route.query.nodeName }}
          </span>
        </div>
      </div>
      <h4>考核信息</h4>
      <div class="infobox">
        <div class="infobox_header">
          <div class="header_item">
            考核发起人:{{ this.$route.query.initiator||'' }}
          </div>
          <div class="header_item">
            被考核人:{{ this.$route.query.nickName }}
          </div>
          <div class="header_item">
            被考核人部门:{{ this.$route.query.departmentTitle }}
          </div>
          <div class="header_item">
            被考核人岗位:{{ this.$route.query.postTitle }}
          </div>
          <div class="header_item">
            考核发起时间:{{ this.$route.query.time }}
          </div>
          <div class="header_item">考核结果:{{ this.$route.query.score }}</div>
        </div>
        <div ref="tableWrapper" class="infobox_bottom">
          <el-table
            :data="tableData"
            fit
            header-align="center"
            style="width: 100%"
            :height="tableH"
          >
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column prop="indexName" align="center" label="考核指标" />
            <el-table-column prop="score" align="center" label="考核结果" />
            <el-table-column
              prop="indexComment"
              align="center"
              label="当前备注"
            />

            <el-table-column prop="type" align="center" label="历史审批">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  round
                  @click="historylist(scope.row, scope.$index)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h4>审核记录</h4>
      <div
        class="histroybox"
        :style="{
          overflowX: 'hidden',
          overflowY: 'auto'}"
      >
        <el-timeline :reverse="reverse">
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" placement="top">
            <div class="timeLine">
              <div class="content">{{ activity.content }}</div>
              <div class="status" :style="{color:(activity.assessmentStatus==='审核通过'?'rgb(92, 184, 92)':activity.assessmentStatus==='未审核'?'#FF0000':'#000')}">{{ activity.assessmentStatus }}</div>
              <div class="time">
                <span>{{ setText(activity.assessmentStatus) }}</span>
                <span :style="{color:(activity.elapsedTimeStatus==='1'?'#FF0000':'#000')}">{{ activity.elapsedTime ||'' }}</span>
              </div>
            </div>
          </el-timeline-item>

        </el-timeline>
      </div>
    </div>
    <el-dialog v-el-drag-dialog title="历史审批" :visible.sync="dialogTableVisible">
      <el-table :data="gridData" border fit highlight-current-row>
        <el-table-column prop="nickName" label="审核人" />
        <el-table-column prop="comment" label="备注" />
        <el-table-column prop="score" label="分值" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  directives: {
    elDragDialog
  },
  data() {
    return {
      processInstanceId: null,
      tableData: [],
      activities: [],
      gridData: [],
      reverse: true,
      dialogTableVisible: false,
      tableH: 0
    }
  },
  computed: {

    setText() {
      return function(assessmentStatus) {
        if (assessmentStatus === '未审核') {
          return '已用时'
        } else if (assessmentStatus === '审核通过') {
          return '用时'
        }
      }
    }
  },
  mounted() {
    this.fetTableHeight()
  },
  created() {
    this.getid()
    this.geteventdetailsList()
  },
  methods: {
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0
        resolve()
      })
    },
    // 设置table高度
    fetTableHeight() {
      this.resetHeight().then((res) => {
        this.tableH =
          this.$refs.tableWrapper.getBoundingClientRect().height - 10
      })
    },
    // 历史审批
    historylist(row, index) {
      this.dialogTableVisible = true
      this.$Http
        .historicalapproval({
          processInstanceId: row.processInstanceId,
          itemId: row.indexId
        })
        .then((res) => {
          if (res.code === 200) {
            this.gridData = res.result
          }
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    // 详情内容
    async geteventdetailsList() {
      try {
        const res = await this.$Http.eventdetails({
          processInstanceId: this.processInstanceId
        })
        if (res.code === 200) {
          this.tableData = res.result.hkAssessmentScores
          for (var i = 0; i < res.result.hkAssessmentRecordVos.length; i++) {
            this.activities.push({
              content: `${res.result.hkAssessmentRecordVos[i].nickName}#提交了评分`,
              timestamp: res.result.hkAssessmentRecordVos[i].time,
              elapsedTime: res.result.hkAssessmentRecordVos[i].elapsedTime,
              assessmentStatus: res.result.hkAssessmentRecordVos[i].assessmentStatus,
              elapsedTimeStatus: res.result.hkAssessmentRecordVos[i].elapsedTimeStatus

            })
          }
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      } catch (err) {
        console.log('err', err)
      }
    },
    // 拿id
    getid() {
      this.processInstanceId = this.$route.query.processInstanceId
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
.xiangqbox {
  padding: 25px;
  .headerbox {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    background-color: rgba(144, 147, 153, 0.1);
    box-shadow: 2px 2px rgba(144, 147, 153, 0.2);
  }
  .infobox {
    margin-bottom: 10px;
    margin-top: 20px;
    width: 100%;
    height: 500px;
    border-radius: 10px;
    border: 1px rgba(144, 147, 153, 0.2) solid;
    box-sizing: border-box;
    .infobox_header {
      width: 100%;
      height: 50px;
      padding: 5px;
      border-bottom: 1px rgba(144, 147, 153, 0.2) solid;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
    }
    .infobox_bottom {
      width: 100%;
      height: calc(100% - 60px);
      padding: 10px;
    }
  }
  .histroybox {
    margin-top: 20px;
    width: 100%;
    height: 300px;

    border-radius: 10px;
    padding: 20px;
    border: 1px rgba(144, 147, 153, 0.2) solid;
    box-sizing: border-box;
    .timeLine{
      width: 30%;
      display: flex;
      align-content: center;
      justify-content:  space-between;
      .content{
        width: 30%;

      }

      .status{
        margin-left: 50px;
        width: 100px;
      }
      .time{
         margin-left: 30px;
        width: 180px;

      }
    }

  }
}
</style>
